<template lang="html">
	<div class="body_wrap">	
	    <div class="banner">
	    	<img src="/img/banner_01.png" alt="" />
	    </div>
	    
		<div class="title_wrap news">			
			<div>
				<div class="title">{{$t('message.productNews')}}</div>
				<div class="sub">Product News</div>
			</div>				
            <div class="list">
               <div class="li" v-for="(item,index) in p_news" :key="index">
				  	<div class="li_img_wrap">
				  		<img :src="item.imgUrl" alt="" style="border-radius: 2px;"/>
				  	</div> 
				  	<div class="li_content_info">
				  		<div class='time'>
				  			<div class='time1'>{{formatTime(item.createTime,2)}} </div>
				  			<div class='time2'>/ {{item.name}}</div>
				  			<div class='time3'> {{formatTime(item.createTime,1)}}</div>
				  		</div>
				  		<div class='content'>
				  			<div class="title">
				  				{{item.title}}
				  			</div>
				  			<div class="sub">
				  				{{item.describeInfo}}
 				  			</div>
				  		</div>
				  		<div class="action">
				  			<img src="/img/btn_more.png" alt="" @click="showInfoData(item)"/>
				  		</div>
				  	</div>
               </div>            	
            </div>            
            <!--page-count 总页数  show-page-size显示的页码个数 force-ellipses页码溢出隐藏 total-items 总条数-->
	        <van-pagination v-model="params.current" :total-items="total" 
	        	:prev-text="$t('message.prev')"
	        	:next-text="$t('message.next')"
	        	:items-per-page="params.size" :show-page-size="3"
                force-ellipses @change="changeCurrent" />
		</div>	
		
		<van-popup v-model="showInfo" position="right" :style="{ height: '100%',width:'100%',marginTop:'-1px' }" :overlay="false">
			<van-nav-bar
			  :title="currentData.title"
			  left-text=""
			  right-text=""
			  left-arrow
			  @click-left="onClickLeft"
			/>		
			
		    <div v-html="currentData.richText"  class="data_info">
		    	
		    </div>	
		</van-popup>	
		
	</div>
</template>                                                                

<script>

export default {
	name: 'news',
	components: {

	},	
	data() {
	    return {
	    	showInfo:false,
			news:{zh:[],jap:[],en:[]},
			p_news:[],
            currentData:{},
            total:0,
			params:{
				current:1,
				relationTableId:0,
				size:10,
				categoryId:1
			},           
	    }  
	},
	watch:{
		 '$i18n.locale'(newValue) {
		 	this.p_news=this.news[newValue]
		 }
	},	
	methods: {	
		onClickLeft(){
			this.showInfo=false
		},
		showInfoData(item){
			this.currentData=item
			this.showInfo=true
		},
		changeCurrent(res){
			this.params.current=res
			this.init()
		},
		formatTime(timer,num){
			let str
			if(num==1){
				str=timer.substring(0,4)
			}else{
				str=timer.substring(5,11)
			}
			
			return str
		},
        init(){
    		// 新闻资讯
			this.$Axios.Post(this.$baseUrl+'relationFile/page',this.params).then(res => {             
               if(res.records.length>0){
					res.records.forEach(item=>{
						let zh={
							imgUrl:item.uploadFile.fileUrl,
							name:item.name,
							title:item.title,
							describeInfo:item.describeInfo,
							createTime:item.createTime,
							richText:item.richText
						}
						let en={
							imgUrl:item.uploadFile.fileUrl,
							name:item.engName,
							title:item.engTitle,
							describeInfo:item.engDescribe,
							createTime:item.createTime,
							richText:item.richText
						}
						let jap={
							imgUrl:item.uploadFile.fileUrl,
							name:item.jpnName,
							title:item.jpnTitle,
							describeInfo:item.jpnDescribe,
							createTime:item.createTime,
							richText:item.richText
						}
						this.news.zh.push(zh)
						this.news.jap.push(jap)
						this.news.en.push(en)
					})
					
					this.p_news=this.news[this.$i18n.locale]	
               }
			})       	
        }

	},
	mounted() {	
	    this.init()
	}
  }
</script>
<style lang="scss" scoped="">
.body_wrap{padding-bottom: 100px;}
.banner{
	img{width: 100%;display: block;}
}
.title_wrap{margin-top: 5px;padding: 20px;position: relative;
  .title{font-size: 24px;color: #0099FF;}
  .sub{font-size: 12px;color: #999999;}  
}
.news{
	.list{margin-top: 10px;
	  .li{display: flex;margin-bottom: 20px;
	  
	    .li_img_wrap{width: 40%;
	      img{width: 100%;display: block;}
	    }
	    .li_content_info{flex: 1;padding-left: 10px;
	      position: relative;
	      .time{display: flex;padding-bottom:5px;border-bottom:1px solid #DCD9DC;
	        .time1{width: 20%;font-size: 14px;}
	        .time2{width: 60%;font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	        .time3{width: 20%;font-size: 12px;text-align: right;}
	      }
	      .content{margin-top: 8px;
	        .title{color: #000;font-size: 12px;margin-bottom: 5px;}
	        .sub{overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	      }
	      .action{
	      	width: 100%;
	      	position: absolute;
	      	bottom: 0;
	      	right: 0px;
	      	text-align: right;
	        img{width: 20px;height: 15px;}
	      }	      
	    }
	  }
	}
}
.data_info{font-size: 16px!important;padding: 20px 10px;
  img{width: 100%!important;height: auto;}
}

</style>



